import React from 'react';
import { Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import BannerAnim, { Element } from 'rc-banner-anim';
import { isImg } from './utils';
import 'rc-banner-anim/assets/index.css';

const { BgElement } = Element;
class Banner extends React.PureComponent {
  render() {
    return (
      <div className="banner1">
        <TweenOneGroup
          key="bannerGroup"
          enter={{ opacity: 0, type: 'from' }}
          leave={{ opacity: 0 }}
          component=""
        >
          <div className="banner1-wrapper" key="wrapper">
            <BannerAnim key="BannerAnim">
              <Element key="elem0" className="banner-user-elem">
                <BgElement key="bg" className="bg bg0" />
                <QueueAnim
                  type={['bottom', 'top']}
                  delay={200}
                  key="text"
                  className="banner1-text-wrapper"
                >
                  <div key="logo" className="banner1-title">
                    {typeof '/images/HqnZZjBjWRbjyMr.png' === 'string' &&
                    '/images/HqnZZjBjWRbjyMr.png'.match(isImg) ? (
                      <img src="/images/HqnZZjBjWRbjyMr.png" width="100%" alt="img" />
                    ) : (
                      '/images/HqnZZjBjWRbjyMr.png'
                    )}
                  </div>
                  <div key="content" className="banner1-content">
                    一个高效的页面动画解决方案
                  </div>
                  <Button ghost key="button" className="banner1-button">
                    Learn More
                  </Button>
                </QueueAnim>
              </Element>
              <Element key="elem1" className="banner-user-elem">
                <BgElement key="bg" className="bg bg1" />
                <QueueAnim
                  type={['bottom', 'top']}
                  delay={200}
                  key="text"
                  className="banner1-text-wrapper"
                >
                  <div key="logo" className="banner1-title">
                    {typeof '/images/HqnZZjBjWRbjyMr.png' === 'string' &&
                    '/images/HqnZZjBjWRbjyMr.png'.match(isImg) ? (
                      <img src="/images/HqnZZjBjWRbjyMr.png" width="100%" alt="img" />
                    ) : (
                      '/images/HqnZZjBjWRbjyMr.png'
                    )}
                  </div>
                  <div key="content" className="banner1-content">
                    一个高效的页面动画解决方案
                  </div>
                  <Button ghost key="button" className="banner1-button">
                    Learn More
                  </Button>
                </QueueAnim>
              </Element>
              <Element key="elem2" className="banner-user-elem">
                <BgElement key="bg" className="bg bg1" />
                <QueueAnim
                  type={['bottom', 'top']}
                  delay={200}
                  key="text"
                  className="banner1-text-wrapper"
                >
                  <div key="logo" className="banner1-title">
                    {typeof '/images/HqnZZjBjWRbjyMr.png' === 'string' &&
                    '/images/HqnZZjBjWRbjyMr.png'.match(isImg) ? (
                      <img src="/images/HqnZZjBjWRbjyMr.png" width="100%" alt="img" />
                    ) : (
                      '/images/HqnZZjBjWRbjyMr.png'
                    )}
                  </div>
                  <div key="content" className="banner1-content">
                    一个高效的页面动画解决方案
                  </div>
                  <Button ghost key="button" className="banner1-button">
                    Learn More
                  </Button>
                </QueueAnim>
              </Element>
            </BannerAnim>
          </div>
        </TweenOneGroup>
        <TweenOne
          animation={{
            y: '-=20',
            yoyo: true,
            repeat: -1,
            duration: 1000,
          }}
          className="banner1-icon"
          style={{ bottom: 40 }}
          key="icon"
        >
          <DownOutlined />
        </TweenOne>
      </div>
    );
  }
}

export default Banner;
